<template>
  <div class="container flex content">
    <div class="left">
      <Card class="search">
        <el-input autofocus ref="input" :disabled="loading" placeholder="请输入内容" v-model="q"
                  @keyup.enter.native="search()">
          <template slot="append">
            <el-link :disabled="loading" @click="goSearch()">搜索</el-link>
          </template>
        </el-input>


        <el-empty v-if="!q" description="输入要搜索的关键字"/>

        <template v-if="rs">
          <el-skeleton :rows="6" animated v-if="loading"/>
          <div class="result" v-if="documents&&q!==''">
            <el-alert type="success" style="margin: 10px 0">
              <span>搜索耗时：{{ time }}ms</span>
            </el-alert>

            <el-empty v-if="rs.total.length===0" description="没有找到结果，换个关键词试试吧！"/>

            <div class="list" v-if="!loading">
              <div class="item" v-for="item in rs.documents">
                <nuxt-link :to="{name:'topic-id',params:{id:item.document.id}}" class="title"
                           v-html="item.text"></nuxt-link>
                <div class="content" v-html="item.document.content"></div>
                <div class="footer">
                  <span class="date">{{ item.document.date }}</span>
                  <span class="score">相似度：{{ item.score }}</span>
                </div>
              </div>
            </div>

            <el-pagination v-if="pageCount>1"
                           background
                           layout="prev, pager, next"
                           :current-page="currentPage"
                           @current-change="changePage"
                           :page-count="pageCount">
            </el-pagination>

          </div>
        </template>
      </Card>
    </div>
    <div class="right">
      <Card title="分词结果" v-if="rs">
        <el-tag v-for="word in rs.words" :key="word" type="primary" style="margin-right: 10px;margin-top: 10px;">{{
            word
          }}
        </el-tag>
      </Card>
      <Card title="大家都在搜">
        <HotRank :rank="rank"></HotRank>
      </Card>

      <Card title="搜索引擎">
        <div style="font-size:12px;line-height:25px;margin-top: 10px;">
          社区搜索引擎采用<el-link type="primary" href="https://github.com/newpanjing/gofound" target="_blank">GoFound</el-link>搜索引擎，是社区采用Golang编程语言自研。
          非常省内存（百万级数据不超过200M内存），适合论坛、博客、等网站使用。同时也支持Python调用。
        </div>
      </Card>
    </div>
  </div>
</template>

<script>
import api from "@/utils/api";

export default {
  name: "search",
  layout: 'base',
  data() {
    return {
      currentPage: 1,
      rs: null,
      q: this.$route.query.q || this.$route.params.q,
      loading: false,
      rank: [
        'SIMPLEPRO在线体验地址',
        '离线模式',
        '重写模板',
        '打开空白',
        '文档地址',
        '使用教程',
        'Demo',
        'Docker镜像',
        '项目无法启动',
        'QQ群'
      ]
    }
  },
  computed: {
    documents() {
      return this.rs && this.rs.documents || []
    },
    pageCount() {
      return this.rs && this.rs.pageCount || 0
    },
    time() {

      return this.rs && this.rs.time || 0
    },
    title() {
      if (this.q) {
        return this.q + "的搜索结果";
      } else {
        return "搜索";
      }
    }
  },
  methods: {
    goSearch() {
      this.currentPage = 1;
      this.search();
      this.$refs.input.focus()
    },
    changePage(page) {
      this.currentPage = page;
      this.search(page);
    },
    async search() {
      if (!this.q) {
        return;
      }
      this.loading = true;
      this.rs = null;
      try {
        let rs = await api.search(this.q, this.currentPage);
        this.rs = rs;
      } catch (e) {
        console.error(e)
      }
      this.loading = false;
    }
  },
  async asyncData({params, query}) {
    let q = query.q || params.q;
    console.log(q)
    let rs = null;
    if (q) {
      rs = await api.search(q);
    }
    return {
      rs
    };
  },
  head() {
    return {
      title: this.title + "-Simple社区",
      meta: [
        {hid: 'description', name: 'description', content: this.title},
        {name: 'keywords', content: 'SimpleUI、SimplePro、Django Admin主题、Django SimpleUI'},
        {name: 'renderer', content: 'webkit'},
      ]
    }
  }
}
</script>
<style>
.highlight {
  color: red;
}
</style>
<style scoped lang="less">

.search {
  padding: 20px;
  background-color: var(--bg-primary);


  .item {
    margin-bottom: 20px;

    .title {
      margin: -.21425em 0 0;
      font-family: 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei UI', 'Microsoft YaHei', 'Noto Sans CJK SC', Sathu, EucrosiaUPC, Arial, Helvetica, sans-serif;
      font-weight: 700;
      font-size: 14px;
    }

    .content {
      margin-top: .6em;
      font-size: 13px;
      line-height: 25px;
      color: var(--color);
    }

    .footer {
      color: var(--color);
    }

    .footer {
      margin-bottom: 20px;
      font-size: 13px;

      .link {
        margin-left: 10px;
        margin-right: 10px;
        color: green;
      }
    }
  }
}
</style>
